<template>
  <div class="edit-dialog">
    <el-dialog
      v-model="dialog"
      :title="titleName"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      :show-close="true"
      width="600px"
      center
      @close="handleClose"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-position="right"
        label-width="auto"
      >
        <el-form-item label="底图">
          <el-upload
            class="upload-demo"
            drag
            ref="uploadAdd"
            action
            :http-request="uploadImg"
            :on-success="uploadImgSuccess"
            :on-remove="handleRemove"
            multiple
            show-file-list
          >
            <img
              v-if="uploadUrl"
              :src="uploadUrl"
              class="uploadImg"
              style="width: 100%; height: 100%"
            />
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <!-- </div> -->
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过20MB
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="配置文件">
          <JsonEditorVue class="editor" :modelValue="data" @update:modelValue="changeJson" @blur="validate" />
         
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            :loading="submitLoading"
            icon="el-icon-check"
            @click="submit('formRef')"
            >提 交</el-button
          >
          <el-button icon="el-icon-close" @click="handleClose">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { profileUpdate ,profileGet} from "@/api/sceneManage";
import { upload, getImg } from "@/api/common";
import JsonEditorVue from "json-editor-vue3";

export default {
  name: "sceneManageEdit",
  props: {
    formData: Object,
    showDialog: Boolean,
    editType: Number,
  },
  components: {
    JsonEditorVue,
  },
  data() {
    return {
      addFormData: {},
      titleName: "上传配置文件",
      submitLoading: false,
      uploadUrl: "",
      fieldPatternImageKey: "",
      rules: {},
      data: { key: "key", value: "value" }
    };
  },
  computed: {
    dialog: function () {
      return this.showDialog;
    },
  },
  watch: {
    dialog(newVal, oldVal) {
      if (newVal) {
        
      const that = this;
      let data = {
        fieldPatternId: this.formData.fieldPatternId
      };
      profileGet(data).then(res => {
        if (res["code"] == 200) {
          that.addFormData = res.value;
          this.data = JSON.parse(that.addFormData.properties);
        this.getMessage();
        }
      });
      }
    },
  },
  mounted() {
    this.uploadUrl = "";
  },
  methods: {
  async validate(editor)  {
      const res = await editor.validate();
      // res 是错误列表，如果是空数组，则表示检测没有错误
      console.log(res);
    },
    changeJson(json) {
      
      this.data = json;
    },
    getMessage() {
      if (this.addFormData.fieldPatternImageKey) {
      this.fieldPatternImageKey= this.addFormData.fieldPatternImageKey;
        let data = {
          key: this.addFormData.fieldPatternImageKey,
        };
        getImg(data).then((res) => {
          if (res["code"] == 200) {
            this.uploadUrl = res.value;
          }
        });
      } else {
        this.uploadUrl = "";
        this.fieldPatternImageKey = "";
      }
    },
    uploadImg(f) {
      let param = new FormData(); //创建form对象
      param.append("file", f.file); //通过append向form对象添加数据
      param.append("type", "FIELD_PATTERN_LOGO"); //添加form表单中其他数据
      upload(param) //上传
        .then((response) => {
          if (response.code == "200") {
            this.uploadUrl = response.value.url;
            this.fieldPatternImageKey = response.value.key;
            this.$message.success("上传成功!");
            this.close();
            //  this.$emit("refreshData");
            //  onSuccess(response.data);
          }
        })
        .catch(({ err }) => {
          f.onError();
        });
    },
    uploadImgSuccess(response, file, fileList) {
      // 缓存接口调用所需的文件路径
      this.$message.success("Logo上传成功!");
    },
    handleRemove(file, fileList) {
      // 更新缓存图片
      console.log("Logo已删除");
    },
    // 取消事件
    handleClose() {
      this.$emit("changeVisibleEditscene", false);
    },
    submit(formName) {
      this.submitLoading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const that = this;
          
          let data = {
            fieldPatternId: this.formData.fieldPatternId,
            fieldPatternImageKey: this.fieldPatternImageKey,
            properties: JSON.stringify(this.data),
          };
          profileUpdate(data).then((res) => {
      this.submitLoading = false;
      
                    that.$emit("changeVisibleEditscene", false);
                    that.$emit("getList");
      }).catch(err=>{
        
      this.submitLoading = false;
      });
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
  },
};
</script>
<style></style>
